/**
 * @fileoverview Language screen.
 *
 * @license Copyright 2018 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */
{namespace cwc.soy.ui.Language autoescape="strict"}


/**
 * Langauge template.
 */
{template .template}
  {@param prefix: string}
  {@param language: string}
  {@param languages: list<string>}
  {@param languageEnglishMap: ?}
  {@param languageNativeMap: ?}

  <ul id="{$prefix}list" class="mdl-list">
    {foreach $lang in $languages}
      <li class="mdl-list__item{if $language == $lang} active{/if}">
        <span class="mdl-list__item-primary-content">
          <i class="material-icons  mdl-list__item-avatar">language</i>
          {if $languageNativeMap[$lang]}
            {$languageNativeMap[$lang]} ({$languageEnglishMap[$lang]})
          {elseif $languageEnglishMap[$lang]}
            {$languageEnglishMap[$lang]}
          {else}
            {$lang}
          {/if}
        </span>
        <span class="mdl-list__item-secondary-action">
          <label class="demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="{$prefix}list-option-{$lang}">
            <input type="radio" id="{$prefix}list-option-{$lang}" class="mdl-radio__button" name="language" value="{$lang}"
              {if $language == $lang} checked{/if}>
          </label>
        </span>
      </li>
    {/foreach}
  </ul>

{/template}
